<template>
  <view class="search" :style="{paddingTop:statusBarHeight+'px'}">
    <uni-nav-bar  :border="false" left-icon="left" title="搜索" @clickLeft="back" />

    <view class="search-area">
      <uni-search-bar ref="searchRef" @confirm="search" :focus="true" v-model="searchForm.keyword" placeholder="搜索" @cancel="onCancel">
      </uni-search-bar>
    </view>

	<view v-if="wallpaperList.length === 0">
		<view v-if="historySearchList?.length>0" class="history-search search-options">
			<view class="header">
				 <view class="title">最近搜索</view>
				 <uni-icons type="trash" size="24" @click="cleanHistory"></uni-icons>
			</view>
		
		  <view class="content">
		    <view v-for="item in historySearchList" :key="item" class="item" @click="jumpClassifyDetail(item)">{{item}}</view>
		  </view>
		</view>
		
		<view   class="hot-search search-options">
		  <view class="title">热门搜索</view>
		
		  <view class="content">
		    <view v-for="item in hotTypeList" :key="item" class="item" @click="jumpClassifyDetail(item)">{{item}}</view>
		  </view>
		</view>
	</view>
	
	<view  v-if="wallpaperList.length > 0" >
		<view class="content">
			<image @click="goDetail(item._id,wallpaperList.map(_item=>_item._id))" v-for="item in wallpaperList" :key="item._id" :src="item.smallPicurl" mode=""></image>
		</view>
		<view class="load-more">
		  <uni-load-more :status="status"></uni-load-more>
		</view>
	</view>
	
	<view class="not-data" v-if="status==='no-more'">
		暂无数据~
	</view>
	
	
  </view>
</template>

<script setup>
import { request } from '../../utils';

const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight)
const searchRef = ref(null)

const hotTypeList = ref([
  '美女','帅哥','宠物','卡通'
])
  
const historySearchList = ref([])

 const status = ref('more')
 
  const searchForm = reactive({
	  keyword:'',
	  page:1,
	  pageSize:15
  })
  
  const wallpaperList = ref([])
  
  /**
   * 进入壁纸详情页面
   */
  const goDetail = (id,ids)=>{
  	  uni.navigateTo({
  	  	url:`/pages/detail/detail?id=${id}&ids=${ids}`
  	  })
  }
  
  /**
   * 取消搜索
   */
  const onCancel = ()=>{
	  if(searchForm.keyword){
		  let history = uni.getStorageSync('searchList')
		  uni.setStorageSync('searchList',[...new Set([...history,searchForm.keyword])])
		  getStorageHistorySearchList()
	  }
	  searchForm.keyword = ''
	  wallpaperList.value = []
  }
  
  
  const getWallpaperByKeyword = ()=>{
	  status.value='loading'
	  uni.showNavigationBarLoading()
	request({
		  url:'https://tea.qingnian8.com/api/bizhi/searchWall',
		  data:{
			  keyword:searchForm.keyword,
			  pageNum:searchForm.page,
			  pageSize:searchForm.pageSize
		  }
	}).then(res=>{
		console.log(res);
		if(res.total===wallpaperList.value.length) {
		  status.value = 'no-more'
		  return 
		} 
		wallpaperList.value.push(...res.data)
		searchForm.page ++
		status.value = 'more'
	}).finally(()=>{
		uni.hideNavigationBarLoading()
	})
  }
  
  onReachBottom(()=>{
	  getWallpaperByKeyword()
  })


const jumpClassifyDetail = (keyword)=>{
	searchForm.keyword = keyword
	search()
}

const cleanHistory= ()=>{
	uni.showModal({
		title:"是否删除历史搜索",
		cancelText:"取消",
		confirmText:"确定",
		success: (data) => {
			console.log(data);
			if(data.confirm){
				
				uni.removeStorageSync('searchList')
				getStorageHistorySearchList()
			}
		}
	})
}

	const getStorageHistorySearchList = ()=>{
		let history = uni.getStorageSync('searchList')
		console.log('history',history);
		if(history){
			historySearchList.value = history
		}else{
			historySearchList.value = []
		}
	}

	onBeforeMount(()=>{
		getStorageHistorySearchList()
	})


  const search = () => {
    console.log('search');
	searchForm.page = 1
	getWallpaperByKeyword()
  }

  const back = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .search {

    .search-options {
      padding: 20rpx;

      .content{
        display: flex;
        flex-wrap: wrap;
		margin-top: 20rpx;
		.item{
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			padding: 8rpx 24rpx;
			border-radius: 30rpx;
			background-color: #F4F4F4;
			
		}
      }
    }
	.history-search{
		.header{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.content{
		padding: 10rpx;
		display: grid;
		grid-gap: 10rpx;
		grid-template-columns: repeat(3,1fr);
		image{
			width: 100%;
			border-radius: 14rpx;
		}
		.load-more {
			margin: 0 auto;
		  padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
		}
	}
	.not-data{
		color: #999;
		text-align: center;
	}
  }
</style>